<template>
	<div class="search-wrap main-wrap">
		<div v-if="goods.length != 0">
			<div>您正在搜索“{{ $route.query.keyWord }}”</div>
			<GoodsList :proList="goods" />
		</div>
		<div class="tips" v-else>
			<h1>没有相关“{{ $route.query.keyWord }}”的搜索结果！</h1>
		</div>
	</div>
</template>
<script>
import GoodsList from "@/components/goods/GoodsList.vue";
import { getSearch } from "@/api";
export default {
	name: "SearchPage",
	data() {
		return {
			goods: [],
		};
	},
	components: {
		GoodsList,
	},
	created() {
		// 第一次搜索
		let { keyWord } = this.$route.query;
		getSearch({ word: keyWord }).then((res) => {
			this.goods = [];
			this.goods.push(...res);
		});
	},
	// beforeRouteUpdate (to, from, next) {
	// 	// 路由更新的数据请求
	// 	next()
	// },
	watch: {
		$route(newR) {
			// 在搜索页搜索产品
			let { keyWord } = newR.query;
			getSearch({ word: keyWord }).then((res) => {
				this.goods = [];
				this.goods.push(...res);
			});
		},
	},
};
</script>
<style scoped lang="scss"></style>
